<template>
  <div class=" allgift">
    <div class="wrap">
          <p class=" all-title">
            <Crumb :navs="nav"></Crumb>
    </p>
    <div>
      <img src="../assets/img/banner.4c6b6225.png" alt="" />
    </div>
    <div class="sort-nav">
        <p class="sort">
            <span>排序:</span>
            <ul class="sort-flex">
                <li @click="srotFn(index,item.min,item.max)" :class="{active:index==isShowOP1}" v-for="(item,index) in options1" :key="index">{{item.txt}}</li>
            </ul>
        </p>
        <p class="sort sort-down">
            <span>分类:</span>
            <ul class="sort-flex">
                <li @click="classFn(index,item.type)" :class="{active: index==isShowOP2}" v-for="(item,index) in options2" :key="index">{{item.txt}}</li>
            </ul>
        </p>
    </div>
    <div class="all-flex">
    <FineItem v-for="item in fineList" :key="item.id" :data="item"></FineItem>
    </div>
    </div>
  </div>
</template>

<script>
import Crumb from "@/components/Crumb.vue";
import { AllGift } from "@/request/api";
import FineItem from "@/components/FineItem";
export default {
  data() {
    return {
      fineList: [],
      arr: [],
      did: 0,
      type: 0,
      min: 0,
      max: 0,
      keyword: "",
      isShowOP1: 0,
      isShowOP2: 0,
      // 排序
      options1: [
        { min: 0, max: 10000, txt: "全部" },
        // "我还可以兑换"的max值是Header组件的coin值
        { min: 0, max: 0, txt: "我还可以兑换" },
        { min: 0, max: 500, txt: "0-500分" },
        { min: 500, max: 1000, txt: "500-1000分" },
        { min: 1000, max: 1500, txt: "1000-1500分" },
        { min: 1500, max: 2500, txt: "1500-2500分" },
        { min: 2500, max: 6500, txt: "2500-6500分" },
        { min: 6500, max: 10000, txt: "6500-10000分" },
      ],
      // 分类数组项
      options2: [
        { type: 0, txt: "全部" },
        { type: 1, txt: "实体商品" },
        { type: 2, txt: "虚拟商品" },
      ],
      // 面包组件
      nav: [
        { link: "#", name: "首页" },
        { link: "#", name: "全部商品" },
        { link: "#", name: "商品详情" },
      ],
    };
  },
  components: {
    FineItem,
    Crumb,
  },
  methods: {
    // 发送请求封装
    async getGoosSreach() {
      let res = await AllGift({
        did: this.did,
        type: this.type,
        min: this.min,
        max: this.max,
        keyword: this.keyword,
      });
      console.log("全部商品", res);
      this.fineList = res.data;
    },
    // 排序
    srotFn(index, min, max) {
      this.isShowOP1 = index;
      this.min = min;
      this.max = max;
      this.getGoosSreach();
    },
    // 分类
    classFn(index, type) {
      this.isShowOP2 = index;
      this.type = type;
      this.getGoosSreach();
    },
  },
  // 页面一进来就渲染
  created() {
    this.getGoosSreach();
  },
};
</script>

<style lang="less" scoped>
.allgift {
  background-color: #f5f5f5;
  .all-title {
    font-size: 16px;
    font-family: SourceHanSansSC;
    font-weight: 400;
    color: #666666;
    padding: 60px 0 20px;
    .home {
      cursor: pointer;
    }
    .more {
      color: #000;
      margin-left: 15px;
    }
  }
  .sort-nav {
    padding: 36px 0 16px;
    .sort {
      display: flex;
      li {
        cursor: pointer;
      }
      span {
        font-size: 16px;
        font-family: SourceHanSansSC;
        color: #333333;
      }
      .sort-flex {
        display: flex;
        .active {
          color: #00329b;
        }
        li {
          margin: 0 15px;
          color: #999999;
        }
      }
    }
    .sort-down {
      margin-top: 32px;
    }
  }
  .all-flex {
    // display: flex;
    // flex-wrap: wrap;
    // margin-bottom: 15px;
    // justify-content: space-between;
    width: 1500px;
    overflow: hidden;
    padding-top: 20px;
    box-sizing: border-box;
  }
}
</style>